<template>
	<div class="menu-box">
		<el-menu background-color="#fff" text-color="#333" active-text-color="#409EFF" :default-active="defaultActive"
			class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect">
			<!-- <el-menu-item data-deep="1" index="0">
				<template slot="title">
					<i class="el-icon-data-line"></i>
					<span>概览</span>
				</template>
			</el-menu-item> -->

			<!-- 循环导航 -->
			<el-submenu data-deep="1" v-for="(group, v1_index) in shown_menus" :key="v1_index" :index="v1_index + ''"
				:data-index="v1_index">
				<template slot="title">
					<i :class="group.icon"></i>
					<span>{{ group.title }}</span>
				</template>

				<template v-if="group.child && group.child.length">
					<template v-for="(item, v2_index) in group.child">
						<el-menu-item data-deep="2" v-if="!item.child" :key="v2_index" :index="v1_index + '-' + v2_index"
							:data-index="v1_index + '-' + v2_index">{{ item.title }}</el-menu-item>
						<el-submenu data-deep="2" v-else :index="v1_index + '-' + v2_index">
							<template slot="title">{{ item.title }}</template>
							<el-menu-item data-deep="3" v-for="(v3, v3_index) in item.child"
								:key="v1_index + '-' + v2_index + '-' + v3_index" :index="v1_index + '-' + v2_index + '-' + v3_index">
								{{ v3.title }}</el-menu-item>
						</el-submenu>
					</template>
				</template>

			</el-submenu>

			<!-- 循环导航 -->
		</el-menu>
	</div>
</template>

<script>
	import {
		system_menus
	} from '@/config/system-menu.js'
	console.log('system_menus', system_menus)


	import {
		IS_OPEN_DEV
	} from '@/config/env.js'

	import permission from '@/store/permission';

	import {
		mapState
	} from "vuex";
	export default {
		name: "page-menu",
		components: {},
		data() {
			return {
				defaultActive: "0",
				defaultActive: "0-0",

				system_menus: system_menus,
				shown_menus: [],
			};
		},
		computed: {

		},
		watch: {
			$route(to, from) {
				// this.setMenuDefault();
			},
		},
		created() {
			this.handle_menus();

			let is_permission_refresh = localStorage.getItem("is_permission_refresh")
			console.log('导航权限刷新处理 is_permission_refresh = ', is_permission_refresh)
			console.log('导航权限刷新处理 路由路径 = ', this.$route.path)

			if (this.$route.path != '/login') {
				if (is_permission_refresh == 1) {
					this.showLoading(1);
					//需要刷新导航权限
					permission.query_user_permission(this.handle_permission)
				} else {
					this.setMenuDefault();
				}
			}
		},

		methods: {
			//处理菜单
			handle_menus() {
				// let is_allow_check_all_menu = false;
				let is_allow_check_all_menu = location.host.includes('localhost'); //是否允许查看所有菜单
				this.$log('路由处理前 system_menus', this.system_menus)


				if (window.admin_config && !is_allow_check_all_menu) {
					let new_menus = [];
					let closed_route_map = window.admin_config.closed_route_map || {};
					this.$log('路由配置 closed_route_map', closed_route_map)


					let level1_list = this.system_menus.filter(v => !closed_route_map[v.route]);

					level1_list.forEach(v1 => {
						let level2_list = (v1.child || []).filter(v => !closed_route_map[v.route])
						if (level2_list.length) {
							level2_list.forEach(v2 => {
								let level3_list = (v2.child || []).filter(v => !closed_route_map[v.route])
								if (level3_list.length) {
									v2.child = level3_list
								}
							})
							v1.child = level2_list
						} else {
							v1.child = null
						}
					})

					new_menus = level1_list;
					this.system_menus = new_menus
				}


				this.$log('路由处理后 system_menus', this.system_menus)
			},

			handle_permission(info) {
				if (info.status == 'success') {
					this.setMenuDefault()

				} else {

				}
				this.hideLoading()
			},


			setMenuDefault() {
				// debugger
				if (this.$route.path == '/login') {
					return
				}
				let current_route_path = this.$route.path;
				let current_route_name = this.$route.name;
				let route_path = '/' + current_route_name
				let route_path_list = []
				// console.log('current_route_path', current_route_path);
				// console.log('current_route_name', current_route_name);

				let is_limit_auth_route = localStorage.getItem('is_limit_auth_route')

				console.log(is_limit_auth_route,'is_limit_auth_route11111')
				let is_allow_check_all_menu = location.host.includes('localhost'); //是否允许查看所有菜单
				// IS_OPEN_DEV != 1 
				if (!is_allow_check_all_menu && is_limit_auth_route == 1) {
					let auth_routes_map = localStorage.getItem('auth_routes_map')
					if (auth_routes_map) {
						auth_routes_map = JSON.parse(auth_routes_map)
					} else {
						auth_routes_map = {}
					}

					this.$log('auth_routes_map', auth_routes_map)

					if (current_route_path != '/login' && current_route_path != '/' && !auth_routes_map[current_route_path]) {
						alertErr('当前账户无访问权限')
						this.$router.push('/login')
						this.hideLoading()
						return
					}


					this.system_menus = this.system_menus.filter(v => auth_routes_map[v.route])

					this.system_menus.forEach((v1, v1_index) => {
						if (route_path == v1.route) {
							route_path_list = [v1_index]
						}

						if (v1.child && v1.child.length) {
							v1.child = v1.child.filter(v => auth_routes_map[v.route])
							v1.child.forEach((v2, v2_index) => {
								if (route_path == v2.route) {
									route_path_list = [v1_index, v2_index]
								}

								if (v2.child && v2.child.length) {
									v2.child = v2.child.filter(v => auth_routes_map[v.route])
									v2.child.forEach((v3, v3_index) => {
										if (route_path == v3.route) {
											route_path_list = [v1_index, v2_index, v3_index]
										}
									})
								}
							})
						}
					})
				} else {
					this.system_menus.forEach((v1, v1_index) => {
						if (route_path == v1.route) {
							route_path_list = [v1_index]
						}
						if (v1.child && v1.child.length) {
							v1.child.forEach((v2, v2_index) => {
								if (route_path == v2.route) {
									route_path_list = [v1_index, v2_index]
								}
								if (v2.child && v2.child.length) {
									v2.child.forEach((v3, v3_index) => {
										if (route_path == v3.route) {
											route_path_list = [v1_index, v2_index, v3_index]
										}
									})
								}
							})
						}
					})
				}

				// console.log('route_path_list', route_path_list)
				this.defaultActive = route_path_list.join('-')
				this.shown_menus = this.system_menus || [];


				this.$log('defaultActive', this.defaultActive)
				this.$log('defaultActive', this.defaultActive)


				this.hideLoading()
			},


			handleOpen(key, keyPath) {
				console.log("handleOpen", key, keyPath);
			},
			handleSelect(key, keyPath) {
				//key 0-2    3-5-0
				//keyPath ['0-2']  ['3', '3-5', '3-5-0']

				let index_arr = key.split("-");
				let v1_index = index_arr[0];
				let v2_index = index_arr[1];
				let v3_index = index_arr[2];
				let deep = index_arr.length;
				let route_item = {};

				if (deep == 2) {
					route_item = this.shown_menus[v1_index].child[v2_index];
				} else if (deep == 3) {
					route_item = this.shown_menus[v1_index].child[v2_index].child[v3_index];
				}

				let route = route_item.route;
				this.$log("菜单切换 key", key);
				this.$log("菜单切换 keyPath", keyPath);
				this.$log("菜单切换 route_item", route_item);
				this.$log("菜单切换 route", route);

				this.$router.push(route);
			},

			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},

			root_click() {
				console.log("点击内容区, 关闭选项弹窗");
				// this.$store.commit('vuex_closePop');
				this.vuex_closePop();
			},
		},
	};
</script>

<style scoped>
	.el-dropdown-menu {
		z-index: 1000000000000000000 !important;
	}
</style>
<style scoped lang="less">
	.menu-box {
		text-align: left;

		/deep/ .el-menu {
			background: #313133;
			border-right: 0;
			min-width: 150px;

			&>.el-menu-item {
				// padding-left: 2px !important;
				// padding-right: 0 !important;
			}

			&>.el-submenu {
				&>.el-submenu__title {
					// padding: 0 !important;
					color: #fff;
					// padding-left: 2px !important;
				}

				&>.el-menu {
					&>.el-menu-item {
						// min-width: 150px;
						// text-align: left;
						// text-indent: 0em;
						// padding-left: 30px !important;
					}

					&>.el-submenu {
						// padding-left: 30px !important;
						// padding-left: 0 !important;

						&>.el-submenu__title {
							// padding-left: 30px !important;
						}

						&>.el-menu {
							&>.el-menu-item {
								// padding-left: 40px !important;
							}
						}
					}
				}
			}
		}
	}

	// .menu-item {
	//   display: block;
	//   height: 50px;
	//   line-height: 50px;
	//   padding: 10px 20px;
	//   color: #666;
	//   text-align: left;

	//   &:hover {
	//     color: #409eff;
	//   }

	//   &.router-link-exact-active {
	//     color: #409eff;
	//   }
	// }
</style>